<template>
	<view>
		<!-- <u-navbar :is-back="true" title="我的委托" :border-bottom="false"></u-navbar> -->
		<view class="wrap">
			<view class="u-tabs-box">
				<u-tabs-swiper activeColor="#2979ff" ref="tabs" :list="list" :current="current" @change="change"
					:is-scroll="false" swiperWidth="750"></u-tabs-swiper>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @transition="transition"
				@animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-for="(swiper,i) in orderList" :key="i">
					<scroll-view scroll-y style="height: 100%;width: 100%;">
						<view class="page-box">
							<view v-if="swiper.length === 0">
								<view class="centre">
									<image :src="empty" mode=""></image>
									<view class="explain">
										您还没有相关的房源
										<view class="tips">可以去委托房源</view>
									</view>
									<view class="btn" @click="publishHouse">委托房源</view>
								</view>
							</view>

							<view v-else class="order" v-for="(item, index) in swiper" :key="index">
								<view class="top">
									<view class="left">
										<view class="store">{{ item.code }}</view>
										<view class="left_icon">
											<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
										</view>
										
									</view>
								</view>

								<view class="item">
									<view class="left">
										<image :src="item.image" mode="aspectFill"></image>
									</view>
									<view class="content">
										<view class="title u-line-2">
											{{item.villageName}}
											{{item.type == '整租' ? item.houseNum + item.houseHall + item.toiletNum : item.roomType}}
										</view>
										<view class="price">¥{{item.price}}</view>
										<view class="type">
											{{item.type}} | {{item.type == '整租' ? item.houseArea : item.roomArea}}㎡ |
											{{item.decoration}}
										</view>
										<!-- 增加经济房源标签 -->
										<view class="par_agent-tag">
											<view v-if="item.agentUserId === user.id" class="agent-tag">经济人房源</view>
											<view v-else class="agent-tag">个人房源</view>
											
											<view v-if="item.type === 4" class="agent-tag">二手房</view>
											<view v-else class="agent-tag">租房</view><strong></strong>
										</view>

										
									</view>
									
								</view>
								
								<view class="bottom">
									<view class="evaluate btn blue-btn" @click.stop="clickImage(item,'agent')">修改
									</view>
								
									<view v-if="item.agentUserId === user.id" class="evaluate btn blue-btn"
										@click.stop="clickImage(item,'agent')">补充发布</view>
								
									<view v-else class="evaluate btn blue-btn" @click.stop="viewImage(item.id)"> 查看
									</view>
									<view class="evaluate btn blue-btn" @click="contactAgent(item.agentUserId)">
										联系经纪人</view>
									<view v-if="item.state === 2" class="evaluate btn orange-btn"
										@click="exposureHouse(item.id)">信息曝光</view>
								</view>
							
							</view>
						
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		<view class="buttom">
			<view class="loginType">
				<view class="wechat item">
					<view class="icon"><u-icon size="60" name="server-man" color="#999" @click="server"></u-icon></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//import config from "@/common/config.js" // 全局配置文件
	import {
		findHouseRoomList,
		exposureHouse
	} from "../../api/house";
	import storage from "@/utils/storage.js";

	export default {
		data() {
			return {
				empty: '/static/empty/default.png',
				orderList: [
					[],
					[],
					[]
				],
				list: [{
						name: '待审核',
						index: 0
					},
					// {
					//   name: '待出售',
					//   // count: 1
					// },
					{
						name: '已上架',
						index: 2
					},
					{
						name: '已下架',
						index: 3
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				pageNumber: 1,
				pageSize: 100,
				user: {}
			};
		},
		mounted() {


		},
		onLoad() {
			console.info("onLoad")
			// this.list.forEach(item => {
			//   this.getOrderList(item.index);
			// });
			if (this.$options.filters.tipsToLogin()) {
				console.info("mounted")
				this.user = storage.getUserInfo();
				this.getOrderList(0)
			}
		},
		methods: {
			exposureHouse(id) {
				exposureHouse(id).then((result) => {

					if (result.code === 200) {
						uni.showToast({
							title: '信息曝光成功',
							icon: 'none',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: result.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			login() {
				this.$u.route('/pages/login/login')
			},
			// 页面数据
			getOrderList(idx) {
				this.findHouseList(idx)
			},
			// tab栏切换
			change(index) {
				const selectedIndex = this.list[index].index;
				this.swiperCurrent = index;
				// 使用 this.$set 清空数组
				this.$set(this.orderList, index, []);
				this.pageNumber = 1;
				this.getOrderList(selectedIndex);
			},
			transition({
				detail: {
					dx
				}
			}) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			findHouseList(idx) {

				var district = uni.getStorageSync("address").district;

				let defaultData = {
					state: idx,
					publishId: this.user.id,
					villageCity: district,
					pageNumber: this.pageNumber,
					pageSize: this.pageSize,
					orderByColumn: 'update_time,create_time',
					isAsc: 'desc'
				}
				findHouseRoomList(defaultData).then((result) => {
					const data = result.data.rows;
					this.houseList = data;
					const targetIndex = this.list.findIndex(item => item.index === idx);
					for (let i = 0; i < this.houseList.length; i++) {
						// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
						let item = this.houseList[i]
						item.image = item.faceUrl

						if (item.type == 0) {
							item.type = '整租'
						} else if (item.type == 1) {
							item.type = '合租'
						} else if (item.type == 2) {
							item.type = '短租'
						} else if (item.type == 10) {
							item.type = '新房'
						}


						if (item.roomType == 1) {
							item.roomType = '主卧'
						} else if (item.roomType == 2) {
							item.roomType = '次卧'
						} else {
							item.roomType = '未知'
						}
						if (this.$u.test.isEmpty(item.houseNum)) {
							item.houseNum = ''
						}
						if (this.$u.test.isEmpty(item.houseHall)) {
							item.houseHall = ''
						}
						if (this.$u.test.isEmpty(item.toiletNum)) {
							item.toiletNum = ''
						}
						// 使用 this.$set 更新数组
						this.$set(this.orderList[targetIndex], this.orderList[targetIndex].length, item);
					}
					// 确保 DOM 更新
					this.$nextTick(() => {
						// 可以在这里添加一些 DOM 更新后的操作
					});
				});
			},
			publishHouse() {
				this.$u.route('/pages/house/detail/preHouse');
			},
			server() {
				// window.open ('https://sourcebyte.cn')
				uni.makePhoneCall({
					phoneNumber: "18313811616",
				});
			},
			clickImage(house, agent) {

				if (house.type == 4) {
					this.$u.route({
						url: '/pages/house/detail/preHouse',
						params: {
							houseId: house.id,
							agent: agent
						}
					})
				} else {
					this.$u.route({
						url: '/pages/house/detail/zuHouse',
						params: {
							houseId: house.id,
							agent: agent
						}
					})
				}

			},
			viewImage(houseId) {
				this.$u.route({
					url: '/pages/house/detail/detail',
					params: {
						houseId: houseId
					}
				})
			},
			contactAgent(id) {
				///pages/mine/im/index?talkId=1916782915438723072
				this.$options.filters.talkIm(id, '', '')

				// uni.makePhoneCall({
				//   phoneNumber: phone
				// });
			}
		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		height: 100%;
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.container {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;

		.empty {
			overflow: hidden;

			.tip {
				color: #909399;
			}

			.btn {
				color: #fff;
				background-color: #2979ff;
				width: 200rpx;
				padding: 15rpx 28rpx;
				border-radius: 130rpx;
				margin: 30rpx 0 0 100rpx;
			}
		}
	}

	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;

		.top {
			// display: flex;
			// justify-content: space-between;

			.left {
				display: flex;
				align-items: center;
				
				.left_icon{
					margin-left: auto;
				}

				.store {
					// margin: 0 10rpx;
					font-size: 32rpx;
				}
			}

			.right {
				color: #2979ff;
			}
		}

		.item {
			display: flex;
			margin: 20rpx 0 0 0;
			justify-content: space-between;
			// align-items: center;

			.left {
				margin-right: 30rpx;
				display: flex;
				
				

				image {
					width: 300rpx;
					height: 260rpx;
					border-radius: 10rpx;
					box-shadow: 0 0 0 2rpx #d9d9d9;
				}
			}

			.content {
				flex: 1;
				position: relative;

				.title {
					font-weight: bold;
					font-size: 28rpx;
					// line-height: 50rpx;
				}

				.price {
					margin: 30rpx 0;
					font-size: 30rpx;
				}

				.type {
					margin: 10rpx 0;
					font-size: 28rpx;
					color: $u-tips-color;
				}

				.desc {
					margin: 10rpx 0;
					font-size: 28rpx;
					color: $u-tips-color;
				}
				
.par_agent-tag{
	// margin-top: auto;
	position: absolute;
	bottom: 0;
	// 增加经济房源标签样式
	.agent-tag {
		color: #000;
		background-color: rgba(245,245,245);
		padding: 8rpx 24rpx;
		border-radius: 4rpx;
		font-size: 20rpx;
		display: inline-block;
		margin-top: 8rpx;
		margin-right: 24rpx;
	}
}
				
			}

			
		}
		
		.bottom {
			display: flex;
			margin-top: 24rpx;
			// flex-direction: column;
			// align-items: flex-end;
		
			.btn {
				margin-bottom: 10rpx;
				// line-height: 20rpx;
				width: auto;
				height: auto;
				padding: 8rpx 32rpx;
				border-radius: 20rpx;
				//border: 2rpx solid $u-border-color;
				font-size: 22rpx;
				text-align: center;
				color: $u-type-info-dark;
				display: flex;
				justify-content: center;
				align-items: center;
				line-height: normal;
				margin-right: 24rpx;
				
			}
		
			.evaluate {
				color: #FFF;
				border-color: $u-tips-color;
			}
		
			.blue-btn {
				color: #fff;
				background-color: rgba(21,183,142);;
				border-color: rgba(21,183,142);;
			}
		}
		
	}

	.centre {
		text-align: center;
		margin: 200rpx auto;
		font-size: 32rpx;

		image {
			width: 164rpx;
			height: 164rpx;
			border-radius: 50%;
			margin-bottom: 20rpx;
		}

		.tips {
			font-size: 28rpx;
			color: #999999;
			margin-top: 20rpx;
		}

		.btn {
			margin: 80rpx auto;
			width: 200rpx;
			border-radius: 32rpx;
			// line-height: 64rpx;
			color: #ffffff;
			font-size: 26rpx;
			background-image: linear-gradient(to left, #2979ff, rgba(#2979ff, 0.6));
		}
	}

	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}

	.buttom {
		.loginType {
			font-size: 14px;
			position: fixed;
			right: 30rpx;
			bottom: 120rpx;
			width: 60px;
			height: 60px;
			padding: 4px;
			cursor: pointer;
			background: #FFF;
			text-align: center;
			// line-height: 60px;
			border-radius: 100%;
			-webkit-box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
			box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1), inset 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
		}
	}
</style>